<template>
  <div class="register">
    <van-nav-bar
      title="设置交易密码"
      right-text=""
      left-arrow
      @click-left="goBack"
      @click-right="onClickRight"
    />

    <div class="reg">
      <div class="content">
        <div class="verify">
          <div
            style=" border-bottom: 1px solid #ebedf0;"
            class="verify-info verify-code"
            @click="showDiv"
          >
            <div style="padding-top: 10px;padding-left:15px;">{{areaNum}}</div>
            <input
              class="codetxt"
              type="text"
              v-model="countrys"
              placeholder="中国"
              ref="countrys"
              disabled
              value
            >
            <!-- <input class="codetxt" type="text" v-model="countrys" placeholder="+86" ref="countrys" disabled value> -->
          </div>
          <van-popup v-model="showCountry" psosition="botton" :overlay="true">
            <van-picker
              show-toolbar
              title="请选择国家"
              :columns="columns"
              @cancel="onCancel"
              @confirm="onConfirm"
            ></van-picker>
          </van-popup>
        </div>
        <div class="verify">
          <div class="verify-info">
            <input type="number" v-model="phone" placeholder="请输入手机号码">
          </div>
          <div class="verify-info verify-code">
            <input type="number" v-model="code" value placeholder="请输入短信验证码" class="msm-code">
            <button class="codetxt" type="button" :disabled="disabled" @click="sendcode">{{btntxt}}</button>
          </div>
          <div class="verify-info">
            <input type="password" v-model="password" placeholder="请输入六位数的交易密码">
            <span class="tips">{{passwordValidate.errorText}}</span>
          </div>
          <div class="verify-info">
            <input type="password" v-model="passwordChecked" placeholder="请重复输入交易密码">
            <span v-if="passwordChecked" class="tips">{{passwordCheckValidate.errorText}}</span>
          </div>
        </div>
        <div class="submit">
          <button type="submit" class="submit-btn" @click="reg">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { NavBar, Popup, Picker, Cell, CellGroup, Toast } from "vant";
import { register, countryList, getVerificationCode,updatePassword } from "../../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast
  },
  data() {
    return {
      showCountry: false,
      show: false,
      columns: [],
      phone: "",
      code: "",
      password: "",
      passwordChecked: "",
      inviteCode: "",
      btntxt: "获取验证码",
      disabled: false,
      time: 0,
      countrys: "",
      countrysId: "",
      areaNum: "+86",
      cList: ""
    };
  },
  created() {
    //国籍
    countryList().then(res => {
      const list = res.data.data;
      console.log(list);
      this.cList = list;
      for (const i in list) {
        const items = list[i];
        const countryChineseName = items.countryChineseName;
        this.columns.push(items.countryChineseName);
      }
    });
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //跳转到登录页
    onClickRight() {
      this.$router.push("/login");
    },
    // showDiv() {
    //     this.show = true;
    // },
    showDiv() {
      this.showCountry = true;
    },
    onCancel(picker) {
      this.showCountry = false; //表示点击取消的时候,组件隐藏掉,关闭
      this.showIdType = false;
    },
    onConfirm(value) {
      this.showCountry = false;
      this.showIdType = false;
      this.$refs.countrys.value = value;
      this.myCard = value;
      this.countrys = value;
      console.log(this.$refs.countrys.value, 8888);
      for (var i = 0; i < this.columns.length; i++) {
        if (this.countrys == this.columns[i]) {
          console.log(i);
          this.countrysId = i;
          this.areaNum = 0;
        }
      }

      for (var i = 0; i < this.cList.length; i++) {
        if (this.countrys == this.cList[i].countryChineseName) {
          console.log(i, 8888888);
          this.areaNum = this.cList[i].areaCode;
        }
      }
    },
    onChange(e) {
      console.log(e.getValues()); // 打印出了选中的时间，是个数组
    },
    //发送手机短信验证码
    sendcode() {
      let reg = /^1(3|4|5|7|8)\d{9}$/;
      if (this.phone == "") {
        this.$toast("手机号不能为空");
      } else if (!reg.test(this.phone)) {
        this.$toast("手机号格式不正确");
      } else {
        this.time = 60;
        this.disabled = true;
        //验证码的时间设置
        this.timer();
        //手机号调取后端接口
        getVerificationCode({
          params: {
            phoneNo: this.phone,
            areaNo:this.areaNum
          }
        })
          .then(res => {
            console.log(res.data);
            if (res.status != 200) {
              this.$toast("网络错误");
            } else if (res.status == 200) {
              if (res.data.error == null && res.data.result == true) {
                this.$toast("请注意接收验证码");
              } else if (res.data.error != null && res.data.result == null) {
                this.$toast(res.data.msg);
              }
            }
          })
          .catch(function(err) {
            console.log(err);
          });
      }
    },
    //验证码的倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    //设置密码
    reg() {
      var that = this;
        console.log(that.password)
     var reg = /^\d{6}$/; 
     if(!reg.test(that.password)){  
        Toast('请输入正确的交易密码')  
        return false;
    }  
    $.ajax({
        type:'post',
        url:window.nowHref + "/user/updatePassword",
        dataType:'json',
        data:{
             token:that.phone,
             newPassword: that.password,
             confirmPassword :that.passwordChecked,
             verificationCode:that.code,
             type:1,
             passwordType:1
        },
        success:function(data){
            console.log(data)
            if(data.code == 200){
                Toast('修改成功！')
                localStorage.setItem('tradePassword',1)
                that.$router.push({ name: "passwordSetting" });
            }else{
              Toast(data.msg)
            }
        }
    })
    }
  },
  computed: {
    passwordValidate: function() {
      let errorText;
      if (!/^\d{6}$/.test(this.password)) {
        errorText = "密码为六位数纯数字";
      } else {
        errorText = "";
      }
      if (!this.passwordFlag) {
        errorText = "";
        this.passwordFlag = true;
      }
      return {
        errorText
      };
    },
    passwordCheckValidate: function() {
      var errorText;
      if (!/^\d{6}$/.test(this.passwordChecked)) {
        errorText = "密码为六位数纯数字";
      } else if (this.password !== this.passwordChecked) {
        errorText = "两次密码不匹配";
      } else {
        errorText = "";
      }
      return {
        errorText
      };
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
  border-bottom-width: 1px;
}
.register {
  width: 100%;
  height: 100%;
  background: #fff;
  .reg {
    display: flex;
    .content {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      .verify {
        width: 100%;
        background: #fff;
        .verify-info {
          width: 100%;
          box-sizing: border-box;
          line-height: 24px;
          background-color: #fff;
          color: #969799;
          font-size: 14px;
          & > input {
            display: flex;
            padding: 10px 15px;
            width: 91%;
            border: 0;
            border-bottom: 1px solid #ebedf0;
          }
          .tips {
            display: block;
            margin-top: 5px;
            text-align: left;
            color: #f44;
          }
        }
        .verify-code {
          display: inline-flex;
          .msm-code {
            flex: 1;
          }
          .codetxt {
            padding: 10px 15px;
            border: 0;
            background: #fff;
            outline: none;
          }
        }
      }
      .submit {
        margin-top: 0.67rem;
        width: 100%;
        background-color: #fff;
        color: #fff;
        font-size: 14px;
        .submit-btn {
          width: 85%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 10vh auto 0;
    border: 0;
        }
      }
    }
  }
  .van-cell {
    text-align: left;
  }
  .van-popup {
    position: fixed;
    top: 83.4%;
    width: 100%;
  }
}
</style>
